<template>
	<view class="container">
		<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/eliontep" class="caty-imsge" mode=""></image>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="welcome">
			登陆后发现更多精彩
		</view>
		<view class="left-top-sign">用心营造自己最满意的家</view>
		<view class="wrapper">
			
			<view class="input-content">
				  <van-field
				    :value="form.phone"
				    placeholder="请输入手机号码"
					label="86 |"
				    :border="false"
					@blur="send"
				  />
			<van-cell-group>
			  <van-field
			    :value="form.code"
				center
			    placeholder="请输入短信验证码"
			    :border="false"
			    use-button-slot
				@blur="sudepr"
			  >
			    <van-button v-if="show == false" slot="button" size="small" @click="xverification">
			      获取验证码
			    </van-button>
				<van-button v-else slot="button" size="small">
				  {{count}}s后重新获取
				</van-button>
			  </van-field>
			</van-cell-group>
			</view>
			<button class="confirm-btn" @click="toLogin">登录</button>
		</view>
		<view class="aaaa" @click="asd()">
		 <image style="height: 100%; width: 100%;" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/webdwx" mode=""></image>
		</view>

	</view>
</template>

<script>
	import Api from '../../http/api.js'
	import {  
        mapMutations  
    } from 'vuex';
	
	export default{
		data(){
			return {
				form:{
					phone: '',
					code: '',
					codeType:'LoginRegistration'
				},
				loginForm:{
					phone: '',
					code: '',
				},
				count:'',
				timer:null,
				show:false,
				logining: false,
				q:{
					openId:'',
					unionId:'',
					nickname:'',
					headimgurl:'',
					sex:'',
					province:'',
					city:"",
					country:''
				},
				list:'',
				info:''
			}
		},
	       onLoad(){
			 
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack(){
				uni.navigateBack();
			},
			// 获取手机号
			send(event){
				this.form.phone = event.detail.value
				this.loginForm.phone = event.detail.value
			},
			// 获取验证码
			sudepr(event){
				this.form.code = event.detail.value
				this.loginForm.code = event.detail.value
			},
			// 获取验证码
			async xverification(){
				const res = await Api.verification(this.form)
				this.$api.msg(res.msg);
				let TIME_COUNT = res.data.remainderTime
				  if (res.code == 200) {
				          this.count = TIME_COUNT;
				          this.show = true;
				          this.timer = setInterval(() => {
				            if (this.count > 0 && this.count <= TIME_COUNT + 1) {
				              this.count--;
				            } else {
				              this.show = false;
				              clearInterval(this.timer);
				              this.timer = null;
				            }
				          }, 1000);
				        }
			},
			// 登陆
			async toLogin(){
				wx.getUserProfile({
				    desc: "info",   
				    success: (res) => {
						this.q.nickname = res.userInfo.nickName
						this.q.headimgurl = res.userInfo.avatarUrl
						this.q.sex = res.userInfo.gender
				        wx.login({
				            success: (ress) => {
								let code = ress.code
								wx.request({
									url:`https://api.weixin.qq.com/sns/jscode2session?appid=wx8e87b3d1254cc04b&secret=ea61eb9a7dca903ce046145cd64e2ddc`,
									data:{
										js_code: code,
										encryptedData: res.encryptedData,
										iv: res.iv,
										rawData: res.rawData,
										signature: res.signature 
									},
									method:"post",
									header:{
										'content-type': 'application/x-www-form-urlencoded'
									},
									success:async(res)=>{
									 this.q.openId = res.data.openid
									 this.q.unionId = res.data.unionid
									 const list = await Api.landing(this.q)
									 this.list = list.data
									 wx.setStorage({
									 	key:'oprnid',
									 	data:this.q.openId
									 })
									},
								})
				            }
				        })
						
				    },
				
				})
				this.logining = true;
				const resd = await Api.disembark(this.loginForm)
				this.info = resd.data
				// 存token
				if(resd.code == 200){
				wx.setStorage({
					key:'token',
					data:this.info.token
				})
				 wx.showToast({
					 title:'登陆成功',
				 })
				uni.navigateBack();
				}
				else{
				 this.$api.msg(resd.msg);
				}
			},
			// 微信登陆
		   async asd(){
				  var that = this
				    wx.getUserProfile({
				        desc: "info",      // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				        success: (res) => {
							this.q.nickname = res.userInfo.nickName
							this.q.headimgurl = res.userInfo.avatarUrl
							this.q.sex = res.userInfo.gender
				            wx.login({
				                success: (ress) => {
									let code = ress.code
									wx.request({
										url:`https://api.weixin.qq.com/sns/jscode2session?appid=wx8e87b3d1254cc04b&secret=ea61eb9a7dca903ce046145cd64e2ddc`,
										data:{
											js_code: code,
											encryptedData: res.encryptedData,
											iv: res.iv,
											rawData: res.rawData,
											signature: res.signature
										},
										method:"post",
										header:{
											'content-type': 'application/x-www-form-urlencoded'
										},
										success:async(res)=>{
										 this.q.openId = res.data.openid
										 this.q.unionId = res.data.unionid
										 const list = await Api.landing(this.q)
										 this.list = list.data
										 wx.setStorage({
										 	key:'oprnid',
										 	data:this.q.openId
										 })
										 // 存token
							            wx.setStorage({
											key:'token',
											data:this.list.token
										})
							            wx.showToast({
											title:'登陆成功',
										 })
										 uni.navigateBack();
										},
									})
				                }
				            })
							
				        },

				    })
			},
		}

	}
</script>

<style lang='scss'>
	page{
		background-image: url("https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/elinter");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.container{
		position:relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.caty-imsge{
		width: 60%;
		height: 25%;
		position: absolute;
		top: 0;
		right: 0;
	}
	.wrapper{
		position:relative;
		top: 25%;
		z-index: 90;
		padding-bottom: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	.left-top-sign{
		font-size: 32rpx;
		color: #a4a4a4;
		position:relative;
		top: 17%;
		margin-left: 68rpx;
	}
	.welcome{
		margin-left: 68rpx;
		position:relative;
		top: 15%;
		font-size: 56upx;
		color: #1d1d1d;
		font-weight: bold;
	}
	.input-content{
		padding: 0 60upx;
	}
	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
		&:after{
			border-radius: 100px;
		}
	}
	.forget-section{
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;
		text{
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
	
	.aaaa{
		width:85rpx;
		height: 85rpx;
		border-radius: 50%;
		margin-left: 100rpx;
		position: absolute;
		top: 60%;
	}
	.van-icon{
		transform: translate(10px,10px);
	}
	.van-cell--borderless{
		border-bottom: 2rpx solid #D9D9D9 !important;
	}
	.van-cell__title{
		min-width: 3em !important;
		max-width: 3em !important;
		.van-field__label{
			color: #a4a4a4;
		}
	}
   /* 验证码 */
   /deep/ .van-button--default{
	   /* border-left: 2rpx solid #D9D9D9 !important; */
	   border: 1px solid rgba(0, 0, 0, 0) !important;
	   border-left: 2rpx solid #D9D9D9 !important;
	   color: #ff7144 !important;
   }
   /deep/.van-button{
	   background-color: rgba(0, 0, 0, 0) !important;
   }
   .van-cell{
	   background-color: rgba(0, 0, 0, 0) !important;
   }
</style>
